<template>
  <div class="receipt" v-if="data" :class="{'receipt-hide':hideChecked}">
    <div class="receipt-header">
      <div class="receipt-check" v-if="showChecked">
        <i-checkbox i-class="gxs-checkbox" color="#ee7559" :checked="rchecked" @change="handleFruitChange"></i-checkbox>
      </div>
      <div class="receipt-pic">
        <img mode="widthFix" :src="data.goods_logo" />
      </div>
      <div class="receipt-info">
        <p class="receipt-title">{{data.goods_name}} {{data.goods_sn}}</p>
        <div class="receipt-note">
          <p class="receipt-note-type">规格：</p>
          <p class="receipt-note-describe">
            <span>
              <span>{{data.spec_key_name}}</span>
            </span>
            <i-icon type="enter" />
          </p>
        </div>
        <div class="receipt-des">
          <p class="receipt-price">￥{{data.goods_price}}</p>
          <p class="receipt-nst">x{{data.goods_num}}</p>
        </div>
      </div>
    </div>
    <!-- <div class="receipt-body" v-if="open">
      <div class="receipt-specifications" @click="$router.push({ path: '/pages/productInfo/productInfo', query: { goods_id: data.goods_id } }) ">
        <div class="receipt-specifications-header">
          <div class="receipt-specifications-tr">
            <p class="receipt-specifications-th receipt-speci">规格</p>
            <p class="receipt-specifications-th receipt-price">单价</p>
            <p class="receipt-specifications-th receipt-num">数量</p>
          </div>
        </div>
        <div class="receipt-specifications-body">
          <div class="receipt-specifications-tr" v-for="(item , index) in data.spec_list" :key="index">
            <div class="receipt-specifications-td receipt-speci">{{item.spec_key_name}}</div>
            <div class="receipt-specifications-td receipt-price">￥{{item.goods_price}}</div>
            <div class="receipt-specifications-td receipt-num">{{item.goods_num}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="receipt-footer">
      <div class="receipt-swich receipt-down" v-if="!open" @click.stop="changeOpen(true)">
        <i-icon type="unfold" size="16" color="#D8D8D8" />
        <p>查看更多规格</p>
      </div>
      <div class="receipt-swich receipt-up" v-if="open" @click.stop="changeOpen(false)">
        <i-icon type="packup" size="16" color="#D8D8D8" />
        <p>收起</p>
      </div>
    </div> -->
  </div>
</template>

<script>
  export default {
    props: ['data', 'store', 'allChecked', 'checked', 'change', 'showChecked', 'note', 'editNote'],
    data() {
      return {
        open: false,
        price: null,
        rchecked: false,
      }
    },
    methods: {
      changeNote() {
        if (this.editNote) {
          this.editNote(this.data)
        }
      },
      changeOpen(val) {
        this.open = val
      },
      changeCheckbox() {},
      handleFruitChange(e) {
        console.log(e.mp.detail.current)
        this.rchecked = e.mp.detail.current
        this.change(this.data.cart_id, e.mp.detail.current, this.store)
      },
      getTotalPrice() {
        this.price = this.data.goods_price * this.data.goods_num
      }
    },
    mounted() {
      this.getTotalPrice()
    },
    onLoad() {
     
    },
    watch: {
      data() {
        this.getTotalPrice()
      },
      checked() {
        console.log(2222222222222)
        console.log(this.checked)
        this.rchecked = this.checked
      },
      // allChecked() {
      //   console.log(2222222222222)
      //   console.log(this.checked)
      //   this.rchecked = this.allChecked
      // }
    }
  }

</script>

<style lang="less">
  .gxs-checkbox {
    margin-left: -5px;
    margin-right: -5px;
    transform: scale(.9, .9);

    .cell {
      padding: 0 10px;
    }
  }

  .receipt-check {
    overflow: hidden;
  }

  .gxs-check {

    .checkbox {
      border: 1px solid #CFCFCF;
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      overflow: hidden;

      &:checked {
        &+.icon {
          background: red;
        }
      }
    }

    .icon {
      // border: 1px solid #CFCFCF;
      // display: block;
      // width: 18px;
      // height: 18px;
      // border-radius: 50%;
    }
  }

  .receipt {
    background: #fff;

    .receipt-header {
      display: flex;
      align-items: center;
      padding-top: 15px;
    }

    .receipt-pic {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      overflow: hidden;
      margin-left: 15px;
      background: #F9F9F9;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }


    .receipt-info {
      flex: 1;
      padding: 0 15px 0;

      .receipt-title {
        font-size: 14px;
        color: rgba(96, 96, 96, 1);
        line-height: 1em;
      }

      .receipt-note {
        width: 100%;
        margin-top: 6px;
        display: flex;
        align-items: flex-start;

        .receipt-note-type {
          font-size: 10px;
          color: rgba(96, 96, 96, 1);
          white-space: nowrap;
          padding: 5px 0;
        }

        .receipt-note-describe {
          flex: 1;
          padding: 5px;
          font-size: 10px;
          color: rgba(160, 160, 160, 1);
          background: rgba(252, 252, 252, 1);
          border-radius: 5px;
          position: relative;
          display: flex;
          align-items: center;

          span {
            flex: 1;
          }

        }
      }


    }

    .receipt-body {
      padding-left: 47px;

      .receipt-specifications {
        background: rgba(252, 252, 252, 1);
        border-radius: 5px;
        margin-top: 15px;

        .receipt-specifications-header {
          border-bottom: 1px solid rgba(247, 247, 247, 1);
        }

        .receipt-specifications-body {
          padding-bottom: 8px;

          .receipt-price {
            color: #EE7559;
          }
        }

        .receipt-specifications-tr {
          display: flex;
          justify-content: space-around;
        }

        .receipt-specifications-th {
          line-height: 25px;
          font-size: 12px;
          color: rgba(160, 160, 160, 1);
          text-align: center;
        }


        .receipt-specifications-tr {}

        .receipt-specifications-td {
          margin-top: 10px;
          font-size: 12px;
          color: rgba(160, 160, 160, 1);
          text-align: center;
        }
      }
    }

    .receipt-footer {
      padding-left: 142px;

      .receipt-swich {
        padding: 10px 0;
        display: flex;
        align-items: center;
      }

      p {
        margin-left: 15px;
        font-size: 12px;
        color: rgba(160, 160, 160, 1);
      }

    }

    .receipt-model {
      flex: 2;
    }

    .receipt-speci {
      flex: 4;
    }

    .receipt-price {
      flex: 1;
    }

    .receipt-num {
      flex: 1;
    }

  }

  .receipt-hide {
    .receipt-header {
      padding-left: 15px;
    }

    .receipt-body {
      padding-left: 15px;
    }

    .receipt-footer {
      padding-left: 110px;
    }
  }

  .receipt-des {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 6px;

    .receipt-price {
      font-size: 14px;
      color: rgba(238, 117, 89, 1);
      line-height: 1em;
    }

    .receipt-nst {
      font-size: 12px;
      color: rgba(160, 160, 160, 1);
    }
  }

</style>
